import React from "react";
import styles from "./ThemeSwitch.module.css";
import { LIGHT, useTheme } from "../store/useTheme";
import SunIcon from "./icons/SunIcon";
import MoonIcon from "./icons/MoonIcon";

const ThemeSwitch: React.FC = () => {
    const theme = useTheme((state) => state.theme);
    const toggleTheme = useTheme((state) => state.toggleTheme);

    return (
        <button className={styles.themeSwitch} onClick={toggleTheme}>
            {theme === LIGHT ? (
                <SunIcon className={styles.icon} />
            ) : (
                <MoonIcon className={styles.icon} />
            )}
        </button>
    );
};

export default ThemeSwitch;